<template>
	<el-form class="v-search-bar-el-form" inline>
		<component v-for="(item, index) in children" :key="index" v-show="itemIsShow(index)" :is="item"></component>
		<el-form-item style="margin-right: 0">
			<el-button v-ripple icon="RefreshRight" type="default" @click="$emit('on-reset-search')" v-once>
				重置
			</el-button>
			<el-button v-ripple icon="Search" type="primary" @click="$emit('on-search')" v-once> 搜索 </el-button>
			<el-button
				text
				type="primary"
				@click="visible = !visible"
				style="vertical-align: top"
				v-ripple
				v-if="showArrow"
			>
				{{ visible ? "收起" : "展开" }}
				<arrow-down style="margin-left: 5px; width: 1em; height: 1em" v-if="!visible"></arrow-down>
				<arrow-up style="margin-left: 5px; width: 1em; height: 1em" v-else></arrow-up>
			</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
const props = defineProps({
	arrow: {
		type: Boolean,
		default: true,
	},
	showLength: {
		type: Number,
		default: 3,
	},
})
defineEmits(["on-reset-search", "on-search"])

const visible = shallowRef(false)

const slots = useSlots()
const children = shallowRef([])
if (slots.default) {
	const [slot] = slots.default()
	children.value = slot.children
}

const showArrow = computed(() => {
	if (!props.arrow) {
		return false
	}
	if (Array.isArray(children.value)) {
		return children.value.length > props.showLength
	}
	return false
})

function itemIsShow(index) {
	if (!props.arrow) return true
	if (typeof index !== "string" && typeof index !== "number") {
		index = Number(index)
	}
	return +index < props.showLength || visible.value
}
</script>

<style lang="scss" scoped></style>
